<script lang="ts" setup>
import { h, reactive } from 'vue'
import { ElButton } from 'element-plus'
import XyIcon from '@/components/XyIcon'

interface Student {
  name: string
  age: number
  sex: string
}
const tableData = reactive<Student[]>([
  {
    name: '王五',
    age: 20,
    sex: '男'
  },
  {
    name: '张三',
    age: 18,
    sex: ''
  },
  {
    name: '李四',
    age: 19,
    sex: '男'
  }
])
const tableConfigOper = reactive<TableConfig<Student>>({
  columns: [
    {
      type: 'default',
      label: '姓名',
      prop: 'name'
    },
    {
      type: 'default',
      label: '年龄',
      prop: 'age'
    },
    { type: 'default', label: '性别', prop: 'sex', width: 200 },
    {
      label: '操作',
      type: 'operate',
      width: 300,
      prop: 'operate',
      buttons: props => [
        {
          label: '编辑',
          isShow: props.row.age < 19,
          click: async props => {
            props.button.loading = true
            await new Promise(resolve => setTimeout(resolve, 2000))
            props.button.loading = false
          },
          loading: false,
          icon: h(XyIcon, { icon: 'fluent:people-edit-16-filled' })
        },
        {
          label: '删除',
          type: 'primary',
          click: props => {
            console.log(props)
          }
        },
        {
          label: '详情',
          click: props => {
            console.log(props)
          }
        },
        {
          label: '不传插槽名',
          type: 'success'
        },
        {
          label: '传插槽名',
          type: 'danger',
          slotName: 'slotName'
        }
      ]
    }
  ]
})
</script>
<template>
  <XyTable :tableConfig="tableConfigOper" :tableData="tableData">
    <template #不传插槽名="data">
      <el-button :type="data.button.type" @click="console.log(data)">不传插槽名</el-button>
    </template>
    <template #slotName="{ row, button }">
      <el-button :type="button.type" text @click="console.log(row)">传插槽名</el-button>
    </template>
  </XyTable>
</template>
